<template>
  <div class="register-container">
    <div class="register-content">
      <!-- 左侧信息区 -->
      <div class="register-left">
        <div class="welcome-text">
          <h1>欢迎注册</h1>
          <h2>阿尔茨海默症诊断系统</h2>
          <p>加入我们，开启智能医疗诊断之旅</p>
        </div>
        <div class="register-steps">
          <div class="step-item">
            <el-icon :size="24"><UserFilled /></el-icon>
            <span>创建账号</span>
          </div>
          <div class="step-item">
            <el-icon :size="24"><Document /></el-icon>
            <span>完善信息</span>
          </div>
          <div class="step-item">
            <el-icon :size="24"><Check /></el-icon>
            <span>开始使用</span>
          </div>
        </div>
      </div>

      <!-- 右侧注册表单 -->
      <div class="register-right">
        <div class="register-box">
          <h2>个人信息</h2>
          <p class="register-desc">请填写您的个人信息，带 * 为必填项</p>

          <el-form
              :model="data.form"
              ref="formRef"
              :rules="data.rules"
              label-position="top"
              class="register-form"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                  v-model="data.form.username"
                  placeholder="请输入用户名（至少5个字符）"
                  size="large"
              />
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input
                  v-model="data.form.password"
                  type="password"
                  placeholder="请输入密码（至少6个字符）"
                  show-password
                  size="large"
              />
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                  v-model="data.form.confirmPassword"
                  type="password"
                  placeholder="请再次输入密码"
                  show-password
                  size="large"
              />
            </el-form-item>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input
                      v-model="data.form.name"
                      placeholder="请输入姓名"
                      size="large"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="data.form.gender">
                    <el-radio label="Male">男</el-radio>
                    <el-radio label="Female">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birthdate">
                  <el-date-picker
                      v-model="data.form.birthdate"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%"
                      value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                  <el-input
                      v-model="data.form.phone"
                      placeholder="请输入手机号码"
                      size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button
                  type="primary"
                  class="register-button"
                  size="large"
                  @click="register"
              >
                立即注册
              </el-button>
            </el-form-item>
          </el-form>

          <div class="login-link">
            已有账号？
            <router-link to="/login" class="link">立即登录</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import router from "@/router";
import request from "@/utils/request";

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请确认密码'));
  } else if (value !== data.form.password) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
};

const data = reactive({
  form: {
    userId: '',
    password: '',
    confirmPassword: '',
    name: '',
    gender: '',
    birthdate: '',
    phone: '',
    role: 'User',
    userName: '',
    status: 'Active'
  },
  rules: {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 5, message: '用户名至少为5个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码至少为6个字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { validator: validatePass, trigger: 'blur' }
    ],
    name: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    gender: [
      { required: true, message: '请选择性别', trigger: 'change' }
    ],
    birthdate: [
      { required: true, message: '请选择出生日期', trigger: 'change' }
    ],
    phone: [
      { required: true, message: '请输入联系电话', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ]
  }
});

const formRef = ref();

const register = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post('/register', data.form).then(res => {
        if (res.code === '200') {
          ElMessage.success("注册成功");
          router.push('/login');
        } else {
          ElMessage.error(res.msg);
        }
      }).catch(error => {
        console.error(error);
      });
    }
  });
};
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.register-content {
  display: flex;
  width: 1200px;
  min-height: 700px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}

.register-left {
  width: 400px;
  background: linear-gradient(135deg, #1450aa 0%, #4b91e0 100%);
  color: white;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.welcome-text h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.welcome-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.welcome-text p {
  font-size: 16px;
  opacity: 0.8;
  line-height: 1.6;
}

.register-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: transform 0.3s;
}

.step-item:hover {
  transform: translateX(10px);
}

.register-right {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
}

.register-box {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.register-box h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.register-desc {
  color: #666;
  margin-bottom: 30px;
}

.register-form :deep(.el-input__wrapper) {
  background-color: #f5f7fa;
  border: none;
  box-shadow: none;
}

.register-form :deep(.el-form-item__label) {
  font-weight: 500;
}

.register-button {
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, #1450aa, #4b91e0);
  border: none;
  font-size: 16px;
  font-weight: 500;
}

.register-button:hover {
  background: linear-gradient(90deg, #4b91e0, #1450aa);
}

.login-link {
  text-align: center;
  margin-top: 20px;
  color: #666;
}

.link {
  color: #1450aa;
  text-decoration: none;
  font-weight: 500;
}

@media (max-width: 768px) {
  .register-content {
    flex-direction: column;
    width: 100%;
  }

  .register-left {
    width: 100%;
    padding: 40px 20px;
  }

  .register-right {
    padding: 20px;
  }

  .register-steps {
    flex-direction: row;
    overflow-x: auto;
  }

  .step-item {
    min-width: 200px;
  }
}
</style>